<template>
  <div class="searchSuggestion">
    <van-cell
      v-for="(item, index) in suggestions"
      :key="index"
      icon="search"
      @click="$emit('search',item)"
    >
    <div slot="title" v-html="highlight(item)"></div>
    </van-cell>
  </div>
</template>

<script>
import { getSearchSuggestions } from "../api/search.js";
import { debounce } from "lodash";

// 函数防抖  最后一次调用的时间间隔来决定要不要继续调用，就是那个1000
// const fn = _.debounce(function() {}, 1000);
// fn();

export default {
  name: "searchSuggestion",
  data() {
    return {
      suggestions: [] //联想建议数据
    };
  },
  props: {
    searchText: {
      type: String,
      required: true
    }
  },
  watch: {
    //  要监视的属性名
    // searchText(){

    // }
    // 这是监视的完整写法
    searchText: {
      // 当数据发生变化会执行handler函数
      // 防抖函数,返回函数 防止短时间内连续触发，要超过一定的时间
      handler: debounce(async function() {
        // 发请求
        const { data: res } = await getSearchSuggestions(this.searchText);
        console.log(res.data);
        this.suggestions = res.data.options;
      }, 200),
      // async handler(){
      //     // 发请求
      //    const {data:res} = await getSearchSuggestions(this.searchText)
      //    console.log(res.data)
      //    this.suggestions = res.data.options
      // },
      // 立即监听
      immediate: true
    }
  },
  methods:{
    // 高亮处理  RehExp()是正则表达式的构造函数  参数1字符串  参数2匹配模式 返回值：正则对象
      highlight(str){
          const zhengze = new RegExp(this.searchText,'gi')
          return str.replace(zhengze,`<span style="color:red">${this.searchText}</span>`)
      }
  }
};
</script>
<style scoped lang="less"></style>
